<template>
  <view class="h-pages-module">
    <x-skeleton v-if="!isLoaded" :top="navigationHeight" type="home"/>
    <!--页面模块-->
    <x-store-info v-if="storeId && pageStatus === 1" :store-id="storeId" />
    <block v-if="componentList && componentList.length">
      <block v-for="(componentItem, index) in componentList" :key="componentItem.id" :data-id="index">
        <h-order-swiper v-if="componentItem.type === 5" :detail="componentItem" :navigationHeight="navigationHeight"/>
        <!--banner-->
        <h-banner v-if="componentItem.type === 1" :detail="componentItem" :source="source" :groupsSource="groupsSource" :pageId="query.pageId" :sourcePageId="query.sourcePageId" :sourcePageType="query.pageType"/>
        <!--热区-->
        <h-hot-spot v-if="componentItem.type === 16" :detail="componentItem" :source="source" :groupsSource="groupsSource" :pageId="query.pageId" :sourcePageId="query.sourcePageId" :sourcePageType="query.pageType"/>
        <!--图文导航-->
        <h-image-navigate v-if="componentItem.type === 17" :detail="componentItem" :source="source" :groupsSource="groupsSource" :pageId="query.pageId" :sourcePageId="query.sourcePageId" :sourcePageType="query.pageType"/>
        <!--标题-->
        <h-title-text v-if="componentItem.type === 8" :detail="componentItem" :source="source" :groupsSource="groupsSource" :pageId="query.pageId" :sourcePageId="query.sourcePageId" :sourcePageType="query.pageType"/>
        <!--商品-->
        <h-product-list v-if="componentItem.type === 6" :detail="componentItem" :source="source" :groupsSource="groupsSource" :pageId="query.pageId" :sourcePageId="query.sourcePageId" :sourcePageType="query.pageType"/>
        <!--券后商品/领券中心-->
        <h-coupon-goods v-if="componentItem.type === 14" :detail="componentItem" :source="source" :groupsSource="groupsSource" :pageId="query.pageId" :sourcePageId="query.sourcePageId" :sourcePageType="query.pageType"/>
        <!--官方补贴-->
        <h-subsidy-list v-if="componentItem.type === 15" :detail="componentItem" :source="source" :groupsSource="groupsSource" :pageId="query.pageId" :sourcePageId="query.sourcePageId" :sourcePageType="query.pageType"/>
        <!--瀑布流商品-->
        <h-waterfall ref="h-waterfall" v-if="componentItem.type === 7" :detail="componentItem" :source="source" :pageId="query.pageId" :storeId="storeId" :sourcePageId="query.sourcePageId" :sourcePageType="query.pageType"/>
        <!--涨粉二维码组件-->
        <h-qr-code v-if="componentItem.type === 18" :detail="componentItem" :source="source" :groupsSource="groupsSource" :pageId="query.pageId" :sourcePageId="query.sourcePageId" :sourcePageType="query.pageType"/>
        <!--客服-->
        <x-customer-service v-if="componentItem.type === 9" :detail="componentItem" :source="source" :storeId="storeId" :pageId="query.pageId" :title="title"/>
        <!--直播-->
        <x-live v-if="componentItem.type === 19" :detail="componentItem" :source="source" :storeId="storeId" :pageId="query.pageId" :title="title"/>
      </block>
    </block>
  </view>
</template>

<script>
import XSkeleton from '@/components/x-skeleton';
import HImageNavigate from '@/components/h-image-navigate';
import HHotSpot from '@/components/h-hot-spot';
import HBanner from '@/components/h-banner';
import HTitleText from '@/components/h-title-text';
import HProductList from '@/components/h-product-list';
import HCouponGoods from '@/components/h-coupon-goods';
import HSubsidyList from '@/components/h-subsidy-list';
import HWaterfall from '@/components/h-waterfall';
import XStoreInfo from '@/components/x-store-info';
import HOrderSwiper from '@/components/h-order-swiper';
import HQrCode from '@/components/h-qr-code';
import XCustomerService from '@/components/x-customer-service';
import XLive from '@/components/x-live';

export default {
  name: 'HPagesModule',
  components: {
    XCustomerService,
    HOrderSwiper,
    XStoreInfo,
    HWaterfall,
    HSubsidyList,
    HCouponGoods,
    HProductList,
    HTitleText,
    HBanner,
    HHotSpot,
    HQrCode,
    HImageNavigate,
    XSkeleton,
    XLive
  },
  props: {
    isHome: {
      type: Boolean,
      default: false
    },
    navigationHeight: {
      type: Number,
      default: 0
    },
    query: {
      type: Object,
      default: () => {}
    },
    componentList: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: '首页'
    },
    storeId: {
      type: [String, Number],
      default: ''
    },
    pageStatus: {
      type: Number,
      default: 0
    },
    pageName: {
      type: String,
      default: ''
    },
    isLoaded: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isShowFixed: false, // 是否可以显示悬浮组件
      isReachBottomTop: 0, // 滚动到页面底部时滚动条位置
      scrollTop: 0,
      getPhonePopConfig: null,
      isPageScroll: false, // 页面是否滚动过
      isReachBottom: false // 页面是否滚动到底部
    };
  },
  computed: {
    // 来源
    source() {
      return this.isHome ? 'home' : this.query?.source || 'decorate';
    },
    groupsSource() {
      return this.query?.groupsSource || '';
    },
    // 配置了模块
    hasConfigModule() {
      return this.componentList && this.componentList[0];
    },
    // 悬浮组件，单独拿出来，因为它不是在最后一个，占位元素会影响内容展示
    formFixedDetail() {
      return this.hasConfigModule ? this.componentList.find(item => item.type === 13) : false;
    }
  },
  methods: {
    // page 滚动页面时
    handlePageScroll(e) {
      this.scrollTop = e.scrollTop;
      this.isPageScroll = true;
    },
    // 页面滑动到底部事件
    handleReachBottom() {
      this.isReachBottom = true;
      // 页面滑动到底部埋点
      this.$XTrack('onReachBottom');
      if (this.$refs['h-waterfall']) {
        this.$refs['h-waterfall'][0].handleReachBottom();
      }
    },
    handleRefresh() {
      if (this.$refs['h-product-list']) {
        if (this.hasConfigModule) {
          this.$refs['h-product-list'][0].handleRefresh();
        } else {
          this.$refs['h-product-list'].handleRefresh();
        }
      } else {
        uni.stopPullDownRefresh(); // 完成停止加载
      }
      if (this.$refs['h-waterfall']) {
        this.$refs['h-waterfall'][0].handleRefresh();
      }
    }
  }
};
</script>

<style lang="scss" scoped></style>
